
.AudioPanel {
  font-size: 0.928rem;
  background-color: var(--fg-color);
  padding-right: 20px;

  & > * {
    margin-bottom: 10px;
  }

  & > .capture {
    margin-bottom: 15px;
    width: 100%;
    font-size: 1.3em;
    padding: 5px; 
    margin-top: 10px;
    border-width: 3px;
    background-color: var(--mg-color);
    border-style: dashed;

    &.active {
      border-color: var(--focus-color);
      border-style: solid;
      color: var(--focus-color);
    }
  }

  & > .SliderPlus {
    margin-bottom: 20px;

    /* for pitch HD button. */
    button.toggle {
      padding: 0 5px;
      font-size: 0.9em;

      &.active {
        color: inherit;
        border-color: inherit; 
      }
    }
  }

  & > .mainControls {
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
    
    & button {
      border-width: 2px;
    }
  }

  & > .control {
    display: grid;
    grid-template-columns: 1fr max-content;
    grid-column-gap: 10px;

    &.split {
      margin-bottom: 30px;
    }
  }

  & > .audioTab {

    & > .controls {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-column-gap: 10px;
  
      & > button {
        color: var(--header-icon-color);
        &.active {
          color: var(--header-icon-active-color);
        } 
        &.muted {
          color: var(--header-icon-muted-color);
        } 
      }
    }

    & .SliderPlus {
      margin-top: 10px;
    }
  }
}